<template>
  <div>
    <!-- 
            添加歌曲:
            封面
            名称
            音频文件或者src
         -->
    <div class="content-box">
      <div class="add-music">
        <div class="cover">
          <div>
            <span style="display:inline-block;width:80px;text-align:left;"
              >上传封面:</span
            >
            <div style="display:inline-block">
              <input
                v-show="false"
                type="file"
                accept="image/*"
                @change="tirggerFile($event)"
                ref="input"
              />
              <div class="upload-box" @click="openImg">
                <span v-if="add.imgUrl == ''">点击上传</span>
                <img
                  style="height:100%;width:100%;"
                  v-if="add.imgUrl != ''"
                  :src="add.imgUrl"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="name">
          <span style="display:inline-block;width:80px;text-align:left;"
            >歌曲名：</span
          >
          <el-input
            placeholder="请输入歌曲名"
            v-model="add.name"
            style="display:inline-block;width:700px;"
          ></el-input>
        </div>
        <div class="source">
          <span style="display:inline-block;width:80px;text-align:left;"
            >歌曲来源：</span
          >
          <el-input
            placeholder="请输入歌曲来源"
            v-model="add.source"
            style="display:inline-block;width:700px;"
          ></el-input>
        </div>
        <el-button type="primary">添加</el-button>
      </div>

      <!-- <div class="owned-musics">
        <div class="owned-music">
          <div class="owned-music-info">
            <img src="../assets/images/troye.jpg" class="owned-music-cover" />
            <p>歌曲名：Youth</p>
            <p>歌曲来源：".................."</p>
          </div>
          <div class="music-delete">
            <el-button class="music-delete-btn">删除</el-button>
          </div>
        </div>
      </div> -->

      <div style="padding:20px">
        <el-table :data="musics" stripe style="width: 100%">
          <el-table-column prop="name" label="歌曲" width="180">
          </el-table-column>
          <el-table-column prop="source" label="资源" width="220">
          </el-table-column>
          <el-table-column prop="cover" label="封面">
            <img :src="musics[0].cover" class="owned-music-cover" />
          </el-table-column>
          <el-table-column label="操作">
            <el-button size="mini" type="danger">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content-box {
  margin: 10px;
  padding: 10px;
}

.add-music {
  text-align: left;
  padding: 10px;
  background: rgba(235, 233, 233, 0.658);
}

.upload-box {
  width: 200px;
  height: 200px;
  border: 1px lightgrey solid;
  background: white;
  text-align: center;
  vertical-align: center;
  border-radius: 5px;
}

.upload-box:hover {
  cursor: pointer;
}

.name,
.source,
.cover {
  margin: 5px;
  padding-bottom: 10px;
}

.owned-music {
  background: rgba(235, 233, 233, 0.658);
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px;
}

.owned-music-info {
  display: inline-block;
  width: 800px;
}

.owned-music-cover {
  max-width: 200px;
  max-height: 100px;
}

.music-delete {
  display: inline-block;
  vertical-align: top;
  padding-top: 60px;
}
</style>

<script>
export default {
  name: "MMusic",
  data() {
    return {
      musics: [
        {
          id: 1,
          name: "YOUTH",
          source: "../assets/musics/YOUTH.wav",
          cover: require("../assets/images/troye.jpg")
        }
      ],
      add: {
        isSelectFile: false,
        imgUrl: "",
        name: "",
        source: ""
      }
    };
  },
  methods: {
    tirggerFile: function(event) {
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function(e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.add.imgUrl = "data:image/png;base64," + url;
        // that.$refs['imgimg'].setAttribute('src','data:image/png;base64,'+url);
      };
    },
    openImg() {
      this.$refs.input.click();
    },
    removeMusic(index, id) {}
  }
};
</script>